<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    	<% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="用户主页">
<meta name="author" content="xwj">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>天天书城主页</title>
 		<link rel="stylesheet" href="css/user_css/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/user_css/css/font-awesome.min.css" />
        <!-- Custom CSS -->
        <link href="public_user/style.css" rel="stylesheet"/>
</head>
<body>
   <!--header start-->
     <%@include file="header.jsp"%> 
      <!--header end-->
       <!-- slider-start -->
        <div class="slider-container">
            <div class="slider">
                <!-- Slider Image -->
                <div id="mainslider" class="nivoSlider slider-image">
                    <img src="css/user_css/img/slider/index1.jpg" alt="main slider" title="#htmlcaption1" />
                    <img src="css/user_css/img/slider/index2.jpg" alt="main slider" title="#htmlcaption2" />
                     <img src="css/user_css/img/slider/index3.jpg" alt="main slider" title="#htmlcaption3" />
                </div>
                <!-- Slider Caption 1 -->
                <div id="htmlcaption1" class="nivo-html-caption slider-caption-1">
                  
                </div>
                <!-- Slider Caption 2 -->
                <div id="htmlcaption2" class="nivo-html-caption slider-caption-2">
             
                </div>
                     <!-- Slider Caption 3 -->
                <div id="htmlcaption3" class="nivo-html-caption slider-caption-2">
               
                </div>
            </div>
        </div>
        <!-- slider-end -->
      
      
        <!-- new1-product-area-start -->
        <!-- 新书上架 -->
        <div class="new-product-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-heading">
                            <h3>新书上架</h3>
                        </div>
                    </div>
                </div>
        		<div class="row">
        		<div class="new-product wow fadeIn" >
        			<div id="newbook" class="new-book wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s" style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.5s; animation-name: fadeIn;">
        			</div>
        			</div>
				</div>
                </div>
            </div> 
        
        <!-- new1-product-area-end -->
        
          <!-- 畅销 - -->
        <div class="new-product-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-heading">
                            <h3>畅销</h3>
                        </div>
                    </div>
                </div>
        		<div class="row">
        		<div class="new-product wow fadeIn" >
        			<div id="best_sell" class="new-book wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s" style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.5s; animation-name: fadeIn;">
        			</div>
        			</div>
				</div>
                </div>
            </div> 
        
        <!-- new2-product-area-end -->
        
        
        <!-- best-seller-area-start -->
        <div class="bestseller-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="best-seller-col wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
                            <h3>教育类</h3>
                            <div id="BookType1" class="best-seller-content">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="best-seller-col top-mar-xs wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
                            <h3>科幻</h3>
                            <div id="BookType2" class="best-seller-content">
                               
                                <!-- single-new-product-start -->
                                <div class="single-new-product">
                                    <div class="product-img">
                                        <a href="#"><img src="img/singlepro/10.jpg" alt="" /></a>
                                    </div>
                                    <div class="product-details">
                                        <div class="single-product-content">
                                            <div class="product-title">
                                                <h5><a href="#">consectetuer</a></h5>
                                            </div>
                                            <div class="price-box">
                                                <span class="price">£50.00</span>
                                                <span class="old-price">£70.00</span>
                                            </div>
                                            <div class="product-action">
                                                <button class="btn btn-default add-cart" title="add to cart">Add to cart</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- single-new-product-start -->
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="best-seller-col top-mar-xs wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
                            <h3>文学</h3>
                            <div id="BookType3" class="best-seller-content">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- best-seller-area-end -->
        
        
         <!--footer start-->
     <%@include file="footer.jsp"%>
      <!--footer end-->
      
         <script src="css/user_css/js/vendor/jquery-1.12.0.min.js"></script>
        <!-- bootstrap js -->
        <script src="css/user_css/js/bootstrap.min.js"></script>
        <!-- owl.carousel js -->
        <script src="css/user_css/js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="css/user_css/js/jquery.meanmenu.js"></script>
        <!-- countdown js -->
        <script src="css/user_css/js/countdown.js"></script>
        <!-- jquery.nivo.slider.pack js -->
        <script src="css/user_css/js/jquery.nivo.slider.pack.js"></script>
        <!-- jquery-ui.min.js -->
        <script src="css/user_css/js/jquery-ui.min.js"></script>
        <!-- wow js -->
        <script src="css/user_css/js/wow.min.js"></script>
        <!-- plugins js -->
        <script src="css/user_css/js/plugins.js"></script>
        <!-- main js -->
        <script src="css/user_css/js/main.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){
    	 $("#BookType1").empty();
 		$("#BookType2").empty();
 		$("#BookType3").empty();
    	 getNewBooks();
    	 getBestSellBooks();
    	 //按类别名查询
    	 getBookByTypeName("1","教育");
    	 getBookByTypeName("2","科幻");
    	 getBookByTypeName("3","文学");
    	
    });
  
   //获得上架新书
    function getNewBooks(){
     	$.ajax({
 			url : "booksMsg/getNewBooks.do", // 请求地址
 			type : "POST", // 请求类型
 			async : "true", // 是否异步方式
 			data : {"num":"5"},
 			dataType : "json", // 返回数据格式
 			success : function(data) {
 				if (data.res>0) {
 					var newCar=$("#newbook");
 					newCar.empty();
 					newCar.append("<div class='new-carousel owl-carousel owl-theme' style='opacity: 1; display: block;'></div>");
 					$.each(data.list,function(index, element) {
 					var divs="<div class='col-md-12'>"
                         +"<div class='single-product'>"
                          +"<div class='single-product-img'>"
                             +"<a href='javascript:detail("+element.bid+")'><img src='"+element.bpicurl+"' alt=''></a>"
                                +" <span class='new-box'>"
                                     +"<span class='new'>新书</span>"
                                  +"</span>"
                              +"</div>"
                              +"<div class='single-product-content'>"
                                 +" <div class='product-title'>"
                                     +" <h5><a href='#'>"+element.bname+"</a></h5>"
                                     +" <h6>"+element.bauthor+"</h6>"
                                  +"</div>"
                                +"<div class='price-box'>"
                                     +" <span class='price'>￥"+element.bprice+"</span>"
                                     +" <span class='old-price'>￥"+element.borgprice+"</span>"
                                 +"</div>"
                                  +"<div class='product-action'>"
                                     +" <button class='btn btn-default add-cart' title='加入购物车' onclick='addShopCart("+element.bid+")'>加入购物车</button>"
                                     +" <a class='quick-view' title='书籍详细' href='javascript:detail("+element.bid+")'>查看</a>"
                                  +"</div>"
                               +"</div>"
                            +"</div>"
                       +"</div>";
                       $("#newbook>div").append(divs);
 						});
 	         	  	//配置幻灯片  显示个数，是否显示分页，是否显示上一页下一页,每页滚动而不是每个项目滚动
 	             $("#newbook>div").owlCarousel({items:4,pagination:false,navigation:true,navigationText:['<','>'],scrollPerPage:true});
 	            // $("#newbook").trigger("create");
 				}
 			}
 		});
    	
    }
    //获得畅销书籍
    function getBestSellBooks(){
     	$.ajax({
 			url : "booksMsg/getBestSellBooks.do", // 请求地址
 			type : "POST", // 请求类型
 			async : "true", // 是否异步方式
 			data : {"num":"7"},
 			dataType : "json", // 返回数据格式
 			success : function(data) {
 				if (data.res>0) {
 					var newCar=$("#best_sell");
 					newCar.empty();
 					newCar.append("<div class='new-carousel owl-carousel owl-theme' style='opacity: 1; display: block;'></div>");
 					$.each(data.list,function(index, element) {
 					var divs="<div class='col-md-12'>"
                         +"<div class='single-product'>"
                          +"<div class='single-product-img'>"
                             +"<a href='javascript:detail("+element.bid+")'><img src='"+element.bpicurl+"' alt=''></a>"
                             	+"<span class='sale-box'>"
                            	+" <span class='sale'>热卖</span>"
                     			+"</span>"
                              +"</div>"
                              +"<div class='single-product-content'>"
                                 +" <div class='product-title'>"
                                     +" <h5><a href='javascript:detail("+element.bid+")' title='书籍详细'>"+element.bname+"</a></h5>"
                                     +" <h6>"+element.bauthor+"</h6>"
                                  +"</div>"
                                +"<div class='price-box'>"
                                     +" <span class='price'>￥"+element.bprice+"</span>"
                                     +" <span class='old-price'>￥"+element.borgprice+"</span>"
                                 +"</div>"
                                  +"<div class='product-action'>"
                                     +" <button class='btn btn-default add-cart' title='加入购物车' onclick='addShopCart("+element.bid+")'>加入购物车</button>"
                                     +" <a class='quick-view' title='书籍详细' href='javascript:detail("+element.bid+")'>查看</a>"
                                  +"</div>"
                               +"</div>"
                            +"</div>"
                       +"</div>";
                       $("#best_sell>div").append(divs);
 						});
 	         	  	//配置幻灯片  显示个数，是否显示分页，是否显示上一页下一页,每页滚动而不是每个项目滚动
 	             $("#best_sell>div").owlCarousel({items:4,pagination:false,navigation:true,navigationText:['<','>'],scrollPerPage:true});
 	           
 				}
 			}
 		});
    	
    }
    //按不同类别查询
    function getBookByTypeName(type,name){
    	var BookType1=$("#BookType1");
    	var BookType2=$("#BookType2");
    	var BookType3=$("#BookType3");
		$.ajax({
 			url : "booksMsg/getBookByType.do", // 请求地址
 			type : "POST", // 请求类型
 			async : "true", // 是否异步方式
 			data : {"cname":name},
 			dataType : "json", // 返回数据格式
 			success : function(data) {
 				if (data.res>0) {
 					$.each(data.list,function(index, element) {
 					var divs="<div class='single-new-product'>"
 			        +"<div class='product-img'>"
 		           +" <a href='javascript:detail("+element.bid+")' title='书籍详细'><img src='"+element.bpicurl+"' alt=''/></a>"
 		        	+"</div>"
 		        	+"<div class='product-details'>"
 		            +"<div class='single-product-content'>"
 		              +"  <div class='product-title'>"
 		               +" <h5><a href='javascript:detail("+element.bid+")' title='书籍详细'>"+element.bname+"</a></h5>"
 		                  +" <h6>"+element.bauthor+"</h6>"
 		                 +"</div>"
 		                +"<div class='price-box'>"
 		                   + "<span class='price'>￥"+element.bprice+"</span>"
 		                    +"<span class='old-price'>￥"+element.borgprice+"</span>"
 		                   +"</div>"
 		                +"<div class='product-action'>"
 		                   +" <button class='btn btn-default add-cart' title='加入购物车' onclick='addShopCart("+element.bid+")'>加入购物车</button>"
 		                  +"</div>"
 		                 +"</div>"
 		                +"</div>"
 		               +"</div>"
 		              	if(type=="1"){
 		              		BookType1.append(divs);
 		              	}
 	 					else if(type=="2"){
 	 						BookType2.append(divs);
 	 					}
 	 					else if(type=="3"){
 	 						BookType3.append(divs);
 	 					}
 						});
 					
 				}
 			}
 		});
    }
    
    //添加购物车
     function addShopCart(bid){
		$.ajax({
 			url : "shopCartMsg/addNewCart.do", // 请求地址
 			type : "POST", // 请求类型
 			async : "true", // 是否异步方式
 			data : {"bid":bid},
 			dataType : "json", // 返回数据格式
 			success : function(data) {
 				if(data.res==0){
 					alert("请先登录！");
 				}
 				if (data.res>0) {
 					alert("添加成功");
 					//更新头部购物车
 					getMyCarInfo();
 				}
 			}
 		});
    }
    </script>
        
</body>
</html>